<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_组件间通信（子向父）</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    let app = document.getElementById("app")
    let {Fragment,Component} = React
    /*
    * react里子组件向父组件传递数据，通过的是回调函数
    * 1、给子组件设置一个自定义属性，值为一个函数
    * */

    class App extends Component{
        constructor(props) {
            super(props);
            this.state={
                appMsg: ''
            }
        }
        getC1Data(v){
            console.log(v)
            this.setState({appMsg: v})
        }
        render() {
            return (
                <fieldset>
                    <legend><h2>App组件</h2></legend>
                    <div>接收到Child1的数据：{this.state.appMsg}</div>
                    {/*<Child1 c1Callback={(v)=>{this.setState({appMsg:v})}}></Child1>*/}
                    <Child1 c1Callback={this.getC1Data.bind(this)}></Child1>
                </fieldset>
            );
        }
    }

    class Child1 extends Component{
        constructor(props) {
            super(props);
            console.log(this)
            this.state={
                c1Msg:"c1数据",
                c1Array:[1,2,3,4,5,6]
            }
        }
        render() {
            return (
                <fieldset>
                    <legend><h3>Child1</h3></legend>
                    <button onClick={()=>this.btn1Click()}>点击传递数据给App</button>
                </fieldset>
            );
        }
        btn1Click(){
            this.props.c1Callback(this.state.c1Msg);
        }
    }

    ReactDOM.render(<App></App>,app)
</script>
</body>
</html>